<template>
  <div class="gi_table_page">
    <GiTable title="服务管理" row-key="id" :data="dataList" :columns="columns" :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :pagination="pagination" :disabled-tools="['size']"
      :disabled-column-keys="['name']" @refresh="search">
      <template #top>
        <GiForm v-model="queryForm" defaultCollapsed search :columns="queryFormColumns" size="medium" @search="search"
          @reset="reset" />
      </template>
      <template #toolbar-left>
        <a-button v-permission="['asset:service:records:create']" type="primary" @click="onAdd">
          <template #icon><icon-plus /></template>
          <template #default>新增</template>
        </a-button>
        <a-button v-permission="['asset:service:records:import']" @click="onImport">
          <template #icon><icon-upload /></template>
          <template #default>导入</template>
        </a-button>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['asset:service:records:export']" @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['asset:service:records:get']" title="详情" @click="onDetail(record)">详情</a-link>
          <a-link v-permission="['asset:service:records:update']" title="修改" @click="onUpdate(record)">修改</a-link>
          <a-link v-permission="['asset:service:records:delete']" status="danger" :disabled="record.disabled"
            :title="record.disabled ? '不可删除' : '删除'" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <ServiceRecordsAddModal ref="ServiceRecordsAddModalRef" @save-success="search" />
    <ServiceRecordsDetailDrawer ref="ServiceRecordsDetailDrawerRef" />
    <ServiceImportDrawer ref="ServiceImportDrawerRef" />
  </div>
</template>

<script setup lang="ts">
  import type { TableInstance } from '@arco-design/web-vue'
  import ServiceRecordsAddModal from './ServiceRecordsAddModal.vue'
  import ServiceRecordsDetailDrawer from './ServiceRecordsDetailDrawer.vue'
  import ServiceImportDrawer from './ServiceImportDrawer.vue'
  import { type ServiceRecordsResp, type ServiceRecordsQuery, deleteServiceRecords, exportServiceRecords, listServiceRecords } from '@/apis/asset/service/records'
  import { useDownload, useTable } from '@/hooks'
  import { useDict } from '@/hooks/app'
  import { isMobile } from '@/utils'
  import has from '@/utils/has'

  import type { ColumnItem } from '@/components/GiForm'

  defineOptions({ name: 'ServiceRecords' })


  const queryForm = reactive < ServiceRecordsQuery > ({
    fuzzy: undefined,
    purchaseDate: undefined,
    expireDate: undefined,
    sort: ['id,desc']
  })

  const queryFormColumns: ColumnItem[] = reactive([
    {
      type: 'input',
      label: '关键字',
      field: 'fuzzy',
      span: { xs: 12, sm: 8, xxl: 8 },
      props: {
        placeholder: '编号/名称/供应商',
      },
    },
    {
      type: 'range-picker',
      label: '购买日期',
      field: 'purchaseDate',
      span: { xs: 12, sm: 10, xxl: 8 },
    },
    {
      type: 'range-picker',
      label: '过保日期',
      field: 'expireDate',
      span: { xs: 12, sm: 10, xxl: 8 },
    },
  ])

  const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
  } = useTable((page) => listServiceRecords({ ...queryForm, ...page }), { immediate: true })
  const columns: TableInstance['columns'] = [
    { title: '名称', dataIndex: 'name', slotName: 'name' },
    { title: '供应商', dataIndex: 'producerName', slotName: 'producerName' },
    { title: '价格', dataIndex: 'price', slotName: 'price' },
    { title: '购买日期', dataIndex: 'purchaseDate', slotName: 'purchaseDate' },
    { title: '过保日期', dataIndex: 'expireDate', slotName: 'expireDate' },
    // { title: '状态', dataIndex: 'status', slotName: 'status' },
    { title: '创建人', dataIndex: 'createUserString', slotName: 'createUser' },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      width: 160,
      align: 'center',
      fixed: !isMobile() ? 'right' : undefined,
      show: has.hasPermOr(['asset:service:records:get', 'asset:service:records:update', 'asset:service:records:delete'])
    }
  ]

  // 重置
  const reset = () => {
    queryForm.fuzzy = undefined
    queryForm.purchaseDate = undefined
    queryForm.expireDate = undefined
    search()
  }

  // 删除
  const onDelete = (record: ServiceRecordsResp) => {
    return handleDelete(() => deleteServiceRecords(record.id), {
      content: `是否确定删除该条数据？`,
      showModal: true
    })
  }

  const ServiceImportDrawerRef = ref < InstanceType < typeof ServiceImportDrawer >> ()
  // 导入
  const onImport = () => {
    ServiceImportDrawerRef.value?.onOpen()
  }

  // 导出
  const onExport = () => {
    useDownload(() => exportServiceRecords(queryForm))
  }

  const ServiceRecordsAddModalRef = ref < InstanceType < typeof ServiceRecordsAddModal >> ()
  // 新增
  const onAdd = () => {
    ServiceRecordsAddModalRef.value?.onAdd()
  }

  // 修改
  const onUpdate = (record: ServiceRecordsResp) => {
    ServiceRecordsAddModalRef.value?.onUpdate(record.id)
  }

  const ServiceRecordsDetailDrawerRef = ref < InstanceType < typeof ServiceRecordsDetailDrawer >> ()
  // 详情
  const onDetail = (record: ServiceRecordsResp) => {
    ServiceRecordsDetailDrawerRef.value?.onOpen(record.id)
  }
</script>

<style scoped lang="scss"></style>